<template>
  <div>
    <h1>FieldMapping</h1>

    <el-form :inline="true">
      <el-form-item>
        <el-input placeholder="关键字"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="goAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      border
      stripe
      :data="fieldMappingList">
      <el-table-column sortable prop="id" label="id"/>
      <el-table-column sortable prop="fieldName" label="fieldName"/>
      <el-table-column sortable prop="fieldValue" label="fieldValue"/>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link :href="'#/FieldMappingEdit?id=' + scope.row.id">修改</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      fieldMappingList : []
    };
  },

  methods: {
    goAdd() {
      this.$router.push('/FieldMappingEdit');
    },

    listByPipelineId() {
      var _this = this;

      sdk.FieldMappingApi().listByPipelineId({
        pipelineId : _this.$route.query.pipelineId,
      }).then(resp => {
        _this.fieldMappingList = resp.list;
      });
    },
    
    list() {
      var _this = this;

      sdk.FieldMappingApi().list({
        page: { pageSize: 100 }
      }).then(resp => {
        _this.fieldMappingList = resp.list;
      });
    }
  },

  mounted() {
    if (!this.$route.query.pipelineId) {
      this.list();
      return;
    }

    this.listByPipelineId();
  }
}
</script>
